
// 引入一个包
const path = require("path");
const loader = require("ts-loader");

// 引入html插件
const HTML_WEBPACK_PLUGIN = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin') ;


// webpack的所有配置信息都放在这里
module.exports = {
    entry : './src/index.ts',
    output: {
        path : path.resolve(__dirname , "dist"),
        filename: "bundle.js",
    } ,
    // 指定webpack打包要使用的模块
    module : {
        rules: [
            {
                test : /\.ts$/,
                exclude : /node_modules/,
                use : "ts-loader",
            },
            // 设置less
            {
                test : /\.less$/,
                use : [
                    "style-loader" ,
                    "css-loader" ,
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: () => [
                                    "postcss-preset-env",
                                    {
                                        browsers: 'last 2 versions',
                                    }
                                ]
                            }
                        }
                    },
                    "less-loader" ,

                ]
            }
        ]
    },
    mode : "production",

    // 配置webpack插件
    plugins : [
        new CleanWebpackPlugin() ,
        new HTML_WEBPACK_PLUGIN({
            template : "./src/index.html",
        }) ,
    ] ,
    loader: {

    } ,

    resolve: {
        extensions : [ ".ts" , ".js" ]
    },
    devServer: {
        static: path.join(__dirname, 'dist'),
        port: 3000,
        hot: true, // 热更新
        open: true // 自动打开浏览器
    }

} ;